import React, { Suspense, useMemo, useState } from "react"
import { Box } from "@mui/system"
import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material"
import SourceOutlinedIcon from "@mui/icons-material/SourceOutlined"
import SupervisedUserCircleOutlinedIcon from "@mui/icons-material/SupervisedUserCircleOutlined"
import Lottie from "lottie-react"
import {
  centerLoading,
  createLottie,
  LottieCat,
  LottieCenter,
} from "@/components/Lotties/assets"
import { Lotties } from "@/components/Lotties"
const List = React.lazy(() => import("./List"))
const Manage = React.lazy(() => import("./manage"))
const Upload = React.lazy(() => import("./Upload/Music"))
export default () => {
  const [curTab, setCurTab] = useState("list")
  const Render = useMemo(() => {
    let R = List
    switch (curTab) {
      case "list":
        R = List
        break
      case "new":
        R = Upload
        break
      default:
        R = Manage
        break
    }
    return R
  }, [curTab])
  return (
    <Box
      sx={{
        display: "flex",
        height: "calc(100vh - 130px)",
        flexDirection: "column",
        justifyContent: "space-between",
        position: "relative",
      }}
    >
      <Box sx={{ flexGrow: 1, overflow: "auto" }}>
        <Suspense
          fallback={
            <Box
              sx={{
                margin: "0 auto",
                display: "flex",
                justifyContent: "center",
              }}
            >
              <Lotties animationData={centerLoading}></Lotties>
            </Box>
          }
        >
          <Render></Render>
        </Suspense>
      </Box>
      <Paper
        sx={{
          position: "fixed",
          bottom: 0,
          zIndex: 999,
          left: 0,
          right: 0,
          height: 64,
        }}
        elevation={3}
      >
        <BottomNavigation
          showLabels
          sx={{}}
          value={curTab}
          onChange={(e, value) => setCurTab(value)}
        >
          <BottomNavigationAction
            label="资源列表"
            value="list"
            icon={<SupervisedUserCircleOutlinedIcon />}
          />
          <BottomNavigationAction
            value="new"
            sx={{
              mt: -4,
              borderRadius: "50% 50% 0 0",
              ">div::after": {
                content: "' '",
                position: "absolute",
                bottom: 0,
                left: 0,
                width: "100%",
                height: "100%",
                boxShadow: "0px -5px 4px -3px rgba(0, 0, 0, 0.2)",
                borderRadius: "50%",
              },
            }}
            icon={
              <Lottie
                style={{
                  width: 80,
                  height: 80,
                  backgroundColor: "white",
                  borderRadius: "50%",
                  position: "relative",
                }}
                loop={0}
                animationData={createLottie}
              ></Lottie>
            }
          />
          <BottomNavigationAction
            label="我的资源"
            value="my"
            icon={<SourceOutlinedIcon />}
          />
          {/* <BottomNavigationAction
          label="管理"
          value="admin"
          icon={<SourceOutlinedIcon />}
        /> */}
        </BottomNavigation>
      </Paper>
    </Box>
  )
}
